<template>
	<view class="container position-relative">
		<view style="padding-bottom: 130rpx;">
			<view class="section-1">
				<template v-if="orderType == 'takein'">
					<list-cell class="location"  @click="changeShop">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="store-name flex-fill">
								{{ store.name }}
							</view>
							<image src="/static/images/navigator-1.png" class="arrow"></image>
						</view>
					</list-cell>
				</template>
				<template v-else>
					<list-cell @click="chooseAddress">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center justify-content-between mb-10">
								<view class="font-size-extra-medium  text-color-base ">{{ address.address }}{{address.detail_address}}</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view>
							<view class="d-flex text-color-assist font-size-sm align-items-center">
								<view class="mr-10">{{ address.receiver_name }}</view>
								<view class="mr-10">{{ address.sex == 1 ? '先生' : '女士' }}</view>
								<view>{{ address.receiver_phone }}</view>
							</view>
						</view>
					</list-cell>
				</template>
				<template v-if="orderType == 'takein'">
					<list-cell arrow class="meal-time">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title">取餐时间</view>
							<view class="time">立即用餐</view>
						</view>
					</list-cell>
					<list-cell class="contact" last :hover="false">
						<view class="flex-fill d-flex justify-content-between align-items-center">
							<view class="title flex-fill">联系电话</view>
							<view class="time">
								<input class="text-right" placeholder="请输入手机号码" :value="value" />
							</view>
							<view class="contact-tip font-size-sm" @click="getmobile">自动填写</view>
						</view>
					</list-cell>
				</template>
				<template v-else>
					<list-cell>
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center font-size-base text-color-base">
								<view class="flex-fill">预计送达时间</view>
								<view class="mr-10">15:18</view>
								<image src="/static/images/navigator-1.png" class="arrow"></image>
							</view>
							<view class="font-size-base text-color-primary">
								特殊时期减少接触，请修改下方订单备注
							</view>
						</view>
					</list-cell>
				</template>
			</view>
			<!-- 购物车列表 begin -->
			<view class="section-2">
				<view class="cart d-flex flex-column">
					<list-cell last v-for="(item, index) in cartGoods" :key="index">
						<view class="w-100 d-flex flex-column">
							<view class="d-flex align-items-center mb-10">
								<view class="name-and-props overflow-hidden">
									<view class="text-color-base font-size-medium">
										{{ item.name }}
									</view>
								</view>
								<view
									class="d-flex flex-fill justify-content-between align-items-center text-color-base font-size-medium">
									<view>x{{ item.num}}</view>
									<view>￥{{ (item.totalPrice/100).toFixed(2) }}</view>
								</view>
							</view>
							<view class="text-truncate font-size-medium text-color-assist">
								{{ item.desc }}
							</view>
						</view>
					</list-cell>
					<template v-if="orderType == 'takeout'">
						<list-cell last v-if="store.packing_fee > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>包装费</view>
								<view>￥{{ parseFloat(store.packing_fee) }}</view>
							</view>
						</list-cell>
						<list-cell last v-if="store.delivery_cost > 0">
							<view class="w-100 d-flex font-size-base align-items-center justify-content-between">
								<view>配送费</view>
								<view>￥{{ parseFloat(store.delivery_cost) }}</view>
							</view>
						</list-cell>
					</template>
				</view>
				<!-- <list-cell arrow @click="goToPackages">
					<view class="flex-fill d-flex justify-content-between align-items-center">
						<view class="text-color-base">奈雪券</view>
						<view class="text-color-primary">超值购买优惠券大礼包</view>
					</view>
				</list-cell>
				<list-cell arrow>
					<view class="flex-fill d-flex justify-content-between align-items-center">
						<view class="text-color-base">礼品卡</view>
						<view class="text-color-primary">请选择</view>
					</view>
				</list-cell> -->
				<list-cell last>
					<view class="flex-fill d-flex justify-content-end align-items-center font-size-medium">
						<view>共{{ totalPrice.zn }}件,&nbsp;&nbsp;&nbsp;合计	</view>
						<view class="font-size-extra-lg font-weight-bold" style="font-size: 34rpx;">￥{{ totalPrice.zp }}</view>
					</view>
				</list-cell>
			</view>
			<!-- 购物车列表 end -->
			<view class="d-flex align-items-center justify-content-start font-size-sm text-color-warning"
				style="padding: 20rpx 0;">
				<view class="iconfont iconhelp line-height-100"></view>
				<view>优惠券不与满赠、满减活动共享</view>
			</view>
			<!-- 支付方式 begin -->
			<view class="payment">
				<list-cell last :hover="false">
					<text>支付方式</text>
				</list-cell>
				<list-cell>
					<view class="d-flex align-items-center justify-content-between w-100 disabled">
						<view class="iconfont iconbalance line-height-100 payment-icon"></view>
						<view class="flex-fill">余额支付（余额￥0）</view>
						<view class="font-size-sm">余额不足</view>
						<view class="iconfont iconradio-button-off line-height-100 checkbox"></view>
					</view>
				</list-cell>
				<list-cell last>
					<view class="d-flex align-items-center justify-content-between w-100">
						<view class="iconfont iconwxpay line-height-100 payment-icon" style="color: #7EB73A;"></view>
						<view class="flex-fill">微信支付</view>
						<view class="iconfont iconradio-button-on line-height-100 checkbox checked"></view>
					</view>
				</list-cell>
			</view>
			<!-- 支付方式 end -->
			<!-- 备注 begin -->
			<list-cell arrow last @click="goToRemark">
				<view   class="d-flex flex-fill align-items-center justify-content-between overflow-hidden">
					<view class="flex-shrink-0 mr-20">备注</view>
					<view class="text-color-primary flex-fill text-truncate text-right">{{ form.remark || '点击填写备注' }}
					</view>
				</view>
			</list-cell>
			<!-- 备注 end -->
		</view>
		<!-- 付款栏 begin -->
		<view
			class="w-100 pay-box position-fixed fixed-bottom d-flex align-items-center justify-content-between bg-white">
			<view class="font-size-sm" style="margin-left: 20rpx;">合计：</view>
			<view class="font-size-lg flex-fill">￥{{ totalPrice.zp }}</view>
			<view class="bg-primary h-100 d-flex align-items-center just-content-center text-color-white font-size-base"
				style="padding: 0 60rpx;" @tap="submit">
				付款
			</view>
		</view>
		<!-- 付款栏 end -->
		<modal :show="ensureAddressModalVisible" custom :mask-closable="false" :radius="0" width="90%">
			<view class="modal-content">
				<view class="d-flex justify-content-end">
					<image src="/static/images/pay/close.png" style="width: 40rpx; height: 40rpx;"
						@tap="ensureAddressModalVisible=false"></image>
				</view>
				<view class="d-flex just-content-center align-items-center" style="margin-bottom: 40px;">
					<view class="font-size-extra-lg text-color-base">请再次确认下单地址</view>
				</view>
				<view
					class="d-flex font-size-base text-color-base font-weight-bold align-items-center justify-content-between mb-20">
					<view>{{ address.receiver_name }} {{ address.sex == 2 ? '女士' : '先生' }}</view>
					<view>{{ address.receiver_phone }}</view>
				</view>
				<view class="d-flex font-size-sm text-color-assist align-items-center justify-content-between mb-40">
					<view>{{ address.address + address.detail_address }}</view>
				</view>
				<button type="primary" class="pay_btn" @tap="pay">确认并付款</button>
			</view>
		</modal>
		<u-popup v-model="popupShow" width="80%" :closeable="true" mode="center" border-radius="20" :mask-close-able="false">
			<view class="popup">
				<view class="tip">
					请确认下单门店
				</view>
				<view class="name">
					{{store.name}}
				</view>
				<view class="">
					距你约<text style="color: #adb838; font-weight: 500;">{{store.distance}}</text>,确认订单后将无法更改
				</view>
				<view class="btn">
					<view class="bbtn" @click="changeShop">
						更换门店
					</view>
					<view class="bbtn sure" @click="surePay">
						确定门店
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapGetters
	} from 'vuex'
	import listCell from '@/components/list-cell/list-cell'
	import modal from '@/components/modal/modal'
	// import orders from '@/api/orders'

	export default {
		components: {
			listCell,
			modal
		},
		data() {
			return {
				cart: [],
				popupShow:false,
				form: {
					remark: ''
				},
				value:'',
				ensureAddressModalVisible: false
			}
		},
		onShow() {
			console.log(this.cartGoods);
			this.value = this.member.mobile
			if(this.refresh){
				uni.showModal({
					title: '提示',
					content: '所选店铺商品发生变更~',
					showCancel: false,
					success: (res) => {
						if (res.confirm) {
							this.clear_cart()
							uni.reLaunch({
								url: "/pages/tarbar/menu"
							})
						}
					}
				})
			}
		},
		computed: {
			...mapState(['orderType', 'address', 'store', 'cartGoods','member','refresh']),
			...mapGetters(['totalPrice']),
			// total() {
			// 	return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			// },
			// amount() {
			// 	return this.cart.reduce((acc, cur) => acc + cur.number * cur.price, 0)
			// }
		},
		onLoad(option) {
			const {
				remark
			} = option
			this.cart = uni.getStorageSync('cart')
			remark && this.$set(this.form, 'remark', remark)
		},
		beforeDestroy() {
			
		},
		methods: {
			...mapMutations(['SET_ORDER','clear_cart']),
			getmobile(){
				this.value = this.member.mobile
			},
			goToRemark() {
				uni.redirectTo({
					url: '/goods/remark/remark?remark=' + this.form.remark
				})
			},
			chooseAddress() {
				uni.navigateTo({
					url: '/goods/address/address?is_choose=true&scene=pay'
				})
			},
			goToPackages() {
				uni.navigateTo({
					url: '/pages/packages/index'
				})
			},
			changeShop(){
				uni.navigateTo({
					url:"/goods/index/changeShop"
				})
				this.popupShow = false
			},
			submit() {
				if (this.orderType == 'takeout') {
					this.ensureAddressModalVisible = true
				} else {
					this.pay()
				}
			},
			async surePay(){
				this.popupShow = false
				uni.showLoading({
					title: '支付中...'
				})
				console.log(this.cartGoods);
				let data = {
					shop_id:this.store.id,
					pack:1,
					tip:this.form.remark,
					products:[]
				}
				this.cartGoods.forEach(item=>{
					let tem = {}
					console.log(item);
					tem.product_id = item.id
					tem.product_name = item.name
					tem.cups_id = item.cups.id
					tem.quantity = item.num
					if(item.attribute.length>0){
						tem.extraproperties=[]
						item.attribute.forEach(it=>{
							tem.extraproperties.push({
								name:it.attribute_name,
								options:{
									id:it.id,
									name:it.name
								}
							})
						})
					}	
					if(item.toppings.length>0){
						let temp =
							{
								name:item.toppings[0].toppings_name,
								options:[]
							}
						
						item.toppings.forEach(it=>{
							console.log(it,99999);
							temp.options.push({
								id:it.id,
								name:it.name,
								price:it.price,
								toppings_quantity:it.num
							})
							
						})
						tem.extraproperties.push(temp)
					}
					data.products.push(tem)
				})
				
				// uni.reLaunch({
				// 		url: '/pages/orders/detail?order_no=UTEAVHR63T1753665620BOLNHT8922'
				// 	})
				// 	uni.hideLoading()
				
				console.log(JSON.stringify(data));
				// return
				let resq = await this.apiPost('/order/buy',data)
				console.log(resq);
				
				if (resq.data.code == 1) {
					console.log(resq);
					uni.setStorageSync('info',resq.data.data)
					this.purhcase(resq.data.data.out_trade_no)
				}else{
					this.msg(resq.data.msg)
				} 
				// uni.hideLoading()
			},
			pay() {
				if(this.refresh){
					uni.showModal({
						title: '提示',
						content: '所选店铺商品发生变更~',
						showCancel: false,
						success: (res) => {
							if (res.confirm) {
								uni.switchTab({
									url: "/pages/tarbar/menu"
								})
								this.clear_cart()
							}
						}
					})
				}else{
					this.popupShow = true
				}
				
			},
			async purhcase(data){
				uni.showLoading({
					title:"支付中..."
				})
				let res = await this.apiPost('/order/pay',{out_trade_no:data})
				console.log(res);
				if(res.data.code == 1){
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: res.data.data[0].timeStamp,
						nonceStr: res.data.data[0].nonceStr,
						package: res.data.data[0].package,
						signType: res.data.data[0].signType,
						paySign: res.data.data[0].paySign,
						success:(reswx)=> {
							console.log(reswx.out_trade_no,999);
							console.log('success:' + JSON.stringify(reswx),6666);
							uni.showToast({
								title: '支付成功!',
								icon: 'none',
								duration: 1000,
								complete: (res1) => {
									console.log(res1,222);
									setTimeout(() => {
										uni.reLaunch({
												url: '/goods/order/orderDetail?order_no='+data +'&ispay=true'
											})
											this.clear_cart()
									}, 1000);
								}
							});
						},
						fail: (e) => {
							console.log('fail:' + JSON.stringify(e));
							uni.showToast({
								title: '顾客取消支付',
								icon: 'none',
								duration: 800,
								complete: (res1) => {
									console.log(res1,222);
									setTimeout(() => {
										uni.switchTab({
												url: '/pages/tarbar/takeFoods'
											})
											this.clear_cart()
									}, 800);
								}
							});
						},

					});
					
				}else{
					this.msg(res.data.msg)
				}
				// setTimeout(() => {
				// 	this.clear_cart()
				// }, 800);
				uni.hideLoading()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.popup{
		padding: 60rpx;
		text-align: center;
		font-size: 26rpx;
		.tip{
			font-size: 34rpx;
			margin-bottom: 30rpx;
			
		}
		.name{
			margin: 20rpx 0;
			font-size: 34rpx;
			color: #adb838;
		}
		.btn{
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;
			.bbtn{
				width: 45%;
				height: 80rpx;
				line-height: 80rpx;
				font-size: 28rpx;
				border-radius: 40rpx;
				border: 1px solid #ccc;
				color: #999;
				background-color: transparent;
			}
			.sure{
				color: #fff;
				background-color: #adb838;
			}
		}
	}
	.container {
		padding: 30rpx;
		
	}

	.arrow {
		width: 50rpx;
		height: 50rpx;
		position: relative;
		margin-right: -10rpx;
	}

	.location {
		.store-name {
			font-size: $font-size-lg;
		}

		.iconfont {
			font-size: 50rpx;
			line-height: 100%;
			color: $color-primary;
		}
	}

	.section-1 {
		margin-bottom: 30rpx;

		.contact {
			.contact-tip {
				margin-left: 10rpx;
				border: 2rpx solid $color-primary;
				padding: 6rpx 10rpx;
				color: $color-primary;
			}
		}
	}

	.section-2 {
		.name-and-props {
			width: 65%;
		}
	}

	.payment {
		margin-bottom: 30rpx;

		.disabled {
			color: $text-color-grey;
		}

		.payment-icon {
			font-size: 44rpx;
			margin-right: 10rpx;
		}

		.checkbox {
			font-size: 36rpx;
			margin-left: 10rpx;
		}

		.checked {
			color: $color-primary;
		}
	}

	.pay-box {
		box-shadow: 0 0 20rpx rgba(0, 0, 0, .1);
		height: 100rpx;
	}

	.modal-content {
		.change-address-btn {
			line-height: 2;
			padding: 0 1em;
		}

		.pay_btn {
			width: 100%;
			border-radius: 50rem !important;
			line-height: 3;
		}
	}
</style>